<template>
  <div class="content">
    <div class="headers">
      <div class="headers-left">
        <img
          src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00679-1856.jpg"
          alt=""
          style="width: 5vw; height: 3vw"
        />
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
          "
        >
          <div style="font-size: 16px; font-weight: bold; padding: 0.5vw 0 0">
            wangs官方平台
          </div>
          <p style="font-size: 12px">wangs platform</p>
        </div>
        <div class="headers-dh">
          <img
            src="../../assets/img/caidan.png"
            style="width: 30px; height: 30px; margin: 0 0 0 5%"
            alt=""
            @click="expand"
          />
        </div>
      </div>
      <div class="headers-right">
        <div style="width: 100%">
          <span
            class="spans"
            @click="btnClick"
            style="font-size: 14px; font-weight: bold"
            v-for="(item, index) in tabList"
            :key="index"
            >{{ item.label }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //选项
      tabList: [
        {
          label: "航拍无人机",
          key: "1",
        },
        {
          label: "户外电源",
          key: "2",
        },
        {
          label: "联系我们",
          key: "2",
        },
      ],
      visible: false,
    };
  },
  methods: {
    btnClick() {
      alert("暂未开通功能");
    },
    expand() {
      this.visible = !this.visible;
      var hr = document.querySelector(".headers-right");
      if (this.visible) {
        hr.style.height = "200px";
        hr.style.opacity = "1";
        hr.style.transition = "all 0.3s linear";
        return;
      }
      hr.style.height = "0";
      hr.style.opacity = "0";
      hr.style.transition = "all 0.5s linear";
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  .headers {
    width: 100%;
    display: flex;
    .headers-left {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0 10px;
      .headers-dh {
        display: none;
      }
    }
    .headers-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      // margin-right: 10vw;
      .spans:hover {
        color: rgb(118, 116, 116);
        cursor: pointer;
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .headers {
    width: 100%;
    display: block !important;
    .headers-left {
      width: 100% !important;
      padding: 0;
      position: relative;
      display: flex;
      justify-content: flex-start !important;
      & > img {
        width: 50px !important;
        height: 50px !important;
        transition: all 2s linear;
      }
      .headers-dh {
        display: block !important;
        position: absolute;
        top: 30%;
        right: 5%;
        cursor: pointer;
      }
    }
    .headers-right {
      width: 100%;
      margin: 0;
      height: 0;
      background: #323232;
      opacity: 0;
      overflow: hidden;
      & > div {
        margin: 0;
        display: block !important;
      }
      & span {
        width: 90%;
        margin: 0 auto !important;
        display: block;
        color: #fff;
        border-bottom: 1px dashed #fff;
        line-height: 50px;
      }
    }
  }
}
</style>